<template>
    <div class="city_wrap">
        <div class="city-list-win city-show">
            <div class="city-list-title" style="display: block;">
                <a class="back" @click="getClose()"></a>
                选择城市
            </div>
            <van-tree-select
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-item="clickItem"
            />
        </div>
    </div>
</template>
<script>
import {getCityList} from "@/api/index"
import {mapState,mapGetters,mapMutations } from 'vuex';
import Vue from 'vue';
import { TreeSelect } from 'vant';
Vue.use(TreeSelect);
export default {
    data() {
        return {
            items:[],
            activeId: 1,
            activeIndex: 0,
        };
    },
    methods:{
        getClose(){
            this.$router.push("/position")
        },
        clickItem(data){
            this.$store.commit('SET_CITY',data.text);
            console.log(data);
            this.$router.push("/position")
        }
    },
    async created(){
        let rs = await getCityList();
        this.items = rs.data.items
        console.log(rs)
    },
    components:{
        [TreeSelect.name]:TreeSelect
    }
}
</script>
<style lang="scss" scoped>
.city_wrap{
    height:100%;
    flex-direction: column;
    font-size: 15px;
    display:flex;
    font-family: arial,verdana,helvetica,Microsoft Yahei,sans-serif;
}
.city-list-win{
    height:100%;
    display:flex;
    flex-direction: column;
}
.city-list-win .city-list-title {
    height: 50px;
    line-height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    font-size: 16px;
    .back {
        float: left;
        margin-right: 5px;
        height: 12px;
        width: 12px;
        background: url(https://static.zhipin.com/zhipin-geek/v184/h5/wap/images/icon_close.png);
        background-size: 100% 100%;
        position: relative;
        top: 17px;
        left: 10px;
    }
}
::v-deep .van-tree-select {
    flex:1 !important;
    overflow: hidden;
    flex-direction: row
}
::v-deep .van-sidebar {
    flex:1;
}
::v-deep .van-tree-select__content{
    flex:1 !important;
    background-color: #f8f8fa
}
::v-deep .van-tree-select__item  {
    color: #4b4b4b;
    height: 60px;
    line-height: 60px;
    // padding: 0;
    color: #414a60;
    display: block;
    padding: 0 25px;
    box-sizing: border-box;
    font-weight: 200;
} 
::v-deep .van-sidebar-item--select, .van-sidebar-item--select:active {
    background-color: #f8f8fa !important;
}
.van-sidebar-item--select {
    border-color:#f8f8fa;
}
.van-sidebar-item{
    background-color: #fff;
    color: #4b4b4b;
    height: 60px;
    line-height: 60px;
    padding: 0 25px;
}
</style>